<!-- html -->
<template>
  <h2 class="h2">suspense</h2>
  <span class="span3">父组件</span>
  <hr class="hr1">
  <span class="span3">子组件</span>
  <br>
  <Suspense>
    <!-- 异步任务完成时出现 -->
    <suspenseTest1Child v-slot:default />
    <!-- 异步任务未完成时出现 -->
    <template v-slot:fallback>
      <span class="span2">加载中......</span>
    </template>
  </Suspense>
</template>

<!-- js或ts -->
<script lang="ts">
export default {
  name: 'suspenseTest1'
}
</script>

<!-- js或ts -->
<script setup lang="ts">
import { Suspense } from 'vue'
import suspenseTest1Child from '@/components/asyncloading/SuspenseTest1Child.vue'
</script>

<!-- 样式 -->
<style scoped></style>